<%@page import="org.springframework.web.context.request.SessionScope"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="<%=basePath%>forestage/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=basePath%>forestage/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath%>forestage/css/index.css">
    <link rel="stylesheet" href="<%=basePath%>forestage/css/regist.css">
    <script src="<%=basePath%>forestage/js/jquery.min.js"></script>
    <script src="<%=basePath%>forestage/js/bootstrap.min.js"></script>
    <script src="<%=basePath%>forestage/js/index.js"></script>
    <script type="text/javascript">
			$(function(){
				$(":input[name='username']").change(function(){
					var val = $(this).val();
					val = $.trim(val);
					
					if(val != null & val != ''){
						var url = "/ajax/regist";
						var args = {"username" : val};
						
						$.post(url , args, function(data){
							$("#message").html(data);
						})
					}else{
						$("#message").html("<font color='red'>用户名必填</font>");
					}
				}) 
				
			$(":input[name='email']").blur(function(){
				 var x=$(this).val();
				 var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				 if(!reg.test(x))
					 {
					     $(".display2").html("邮箱格式不正确").css("color","red");
					 }else{
						 $(".display2").html("格式正确").css("color","green");
					 }
			 })
		 })	
		</script>		
    <title>主页</title>
</head>
<body>
<header id="header">
    <nav id="top-nav">
        <div class="city">
            太原&nbsp;&nbsp;<small>更换</small>
        </div>
        <div class="login">
            <ul>
                <li><a href="/login.jsp">登录</a></li>
                <li><a href="/regist.jsp">注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
        </div>
    </nav>
    <div class="logo">
        <div class="content">
            <div class="left">
                <img src="forestage/img/logo.png" alt="logo" width="240px" height="90px"/>
            </div>
            <div class="right">
                <img src="forestage/img/ad.png" alt="广告" width="555px" height="89px"/>
            </div>
        </div>
    </div>
    <nav id="nav">
        <ul class="menu">
            
        </ul>
    </nav>
</header>

<!--中间部分-->
<section id="main">
   <div class="style">
      <h1>欢迎加入万达电影网</h1>
   </div>
   <div class="row-fluid">
     <form method="post" action="/add" class="form">
					<div class="well">
					     <div class="guding">
							<label>
								用户名：
							</label>
							<input type="text" name="username" maxlength="10" required="required"
							placeholder="请输入用户名">
							<span id="message"></span>
							<br/>
							<label>
								用户密码:
							</label>
							<input type="text" name="password" maxlength="10" required="required" id="first"
							placeholder="请输入密码">
							<br/>
							<label>
								再输一次:
							</label>
							<input type="text"  maxlength="10" required="required" id="agin"
							placeholder="请再输入一次">
							<span id="message1"></span>
							<br/>
							<label>
								电话:
							</label>
							<input type="text" name="tel" maxlength="11" required
							placeholder="请输入11位电话" pattern="\d{11}">
							<br/>
							<label>
								email:
							</label>
							<input type="text" name="email" maxlength="50" required="required"
							placeholder="请输入email" ><i class="display2"></i>
							<br/>
                            <input type="checkbox" class="ch" checked="checked"/>
                            <span class="xieyi">我已看过并同意《<a href="#" class="xieyia">万达电影网用户协议</a>》</span>
                            <br>
							<input type="hidden" name="userstate" value="1"/>
							<input type="hidden" value="16"  name="roleid"/>
							<input type="hidden" value="0" name="member"/>
							
							<input type="submit" id="dis" class="btn btn-primary" value="注册 " >
							
							<div style="color: red">
								${msg}
							</div>
						</div>
					 </div>	
				</form>
   </div>
   <div class="account">
       <span>已有账号？<a href="/login.jsp">直接登录</a>   |使用第三方账号登录</span>
   </div>
</section>

<!--脚-->
<footer id="footer">
    <div class="other">
        <div class="other-content">
            <div class="other-left">
                <a href="#">联系我们</a>
                <a href="#">电影情报</a>
                <a href="#">友情链接</a> 
            </div>
            <div class="other-right">
                <a href="#">万达集团</a>
                <a href="#">万达院线官网</a>
            </div>
        </div>
    </div>
    <div class="info">
        <p>Copyright © 2011-2013 Wandafilm.com ALL rights reserved&nbsp;&nbsp;&nbsp;&nbsp;冀ICP备13013593&nbsp;&nbsp;&nbsp;&nbsp;增值电信业务经营许可证B2-20130186 </p>
    </div>
</footer>
</body>
<script type="text/javascript">
   $(function(){
	 //如果协议没有选中，表单无法提交
	 $(".ch").change(function(){
		 var flag = $(".ch").is(':checked');
		 if(flag){
			 $("#dis").removeAttr("disabled");
		 }else{
			 $("#dis").attr("disabled", true); 
		 }
	 })
	 //判断二次输入密码是否一致
	 $("#agin").blur(function(){
		 var pass = $("#first").val().trim();
		 var pass1 = $("#agin").val().trim();
		 if(pass == pass1){
			 $("#message1").html("<font color='green'>通过</font>");
		 }else{
			 $("#message1").html("<font color='red'>两次密码不一致,请重新输入</font>");
		 }
	 })
   })
</script>
</html>